<template>
	<view class="stadiumbox">
		<!-- <view @click="handblack" class="blackbox">
			<image class="blackimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17107328943811032.png"></image>
		</view> -->
		<view class="page_top" :style="{ 'background': topNav ? 'white' : 'transparent', 'z-index': 199 }">
			<top-status></top-status>
			<view class="tabsBack">
				<view @click="goBack()" class="blackbox">
					<!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152491719361330.png"
							mode="widthFix"></image> -->
					<uni-icons :color="topNav ? 'black' : 'lightgray'" type="left" size="30"></uni-icons>
				</view>
				<!-- <view class="topTitle" v-show="topNav">{{ resData.Name }}</view> -->
			</view>
		</view>
		<view class="Backgroundbox">
			<swiper class="swiper" :autoplay="true" circular>
				<swiper-item v-for="item in bannerList" :key="item.ID">
				<view class="bannerImageBox">
					<image class="adverimg" :src="item" mode="widthFix"></image>
				</view>
				</swiper-item>
			</swiper>
				<!-- <image :src="place.ShopLogo" class="logo" mode="aspectFill">
				</image> -->
		</view>
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<view v-else>
				<view class="contentbox">
				<!-- <x-scroll @scroll="scroll" :fixed="true" :isNav="true" @scrolltolower="scrolltolower" :refresh="true"
					:heightFix="80" :autoHeight="true"> -->
					<view class="positionbox">
						<view class="qiuchangxiangxi">
							<view class="namebox">
								<view>
									<text class="name">{{ place.ShopName || '--' }}</text>
									<image v-if="place.IsAuth == 1" class="authenimg"
										src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17174039204751074.png" mode="widthFix"> 
									</image>
								</view>
							</view>
							<view class="labelbox">
								<text class="label" v-for="(value, i) in place.Specialty" :key="i">{{ value }}</text>
							</view>
						</view>
					</view>

					<view class="qiuchangmodule2">
						<view class="timebox">
							<text class="timecolor">营业时间：{{ place.WorkTime == null ? '暂无' : place.WorkTime }}</text>
							<!-- <view v-if="place.WorkTime" class="borderR"></view> -->
						</view>
						<view class="timebox">
							<text class="timecolor">联系电话：{{ place.ServerPhone?place.ServerPhone : '暂无'}}</text>
							<view v-if="place.ServerPhone"  @click="callNumber">
								<image class="callimg"
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105663066231291.png">
								</image>
							</view>
						</view>
						<view @click="openLocation" v-if="place.Address" class="addressbox">
							<view class="addresstitle">地址:</view>
							<view v-if="place.Address.length < 18" class="addressname1">{{ place.Address || '' }}</view>
							<view v-else class="addressname">{{ place.Address || '' }}</view>
							<view class="distancebox" >
								<text class="distance">{{ place.Distance > 100 ? '>100' : place.Distance }}km</text>
								<image class="distanceimg"
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710566335408813.png">
								</image>
							</view>
						</view>
						<view class="underlinebox"></view>
					</view>
					<block v-if="place.IsOpenOrder == 1">
						<view class="daytitle">订场</view>
						<view class="daynav">
							<view class="daytime" v-for="(item, index) in daylist" :key="index" @click="changebg(index, item)" :class="index == 0 ? 'bg4' : ''">
								<view class="week" v-if="index == 0">今天</view>
								<view class="week" v-else-if="index == 1">明天</view>
								<view class="week" v-else>{{ item.week }}</view>
								<view class="day">{{ item.day }}</view>
							</view>
						</view>
					</block>
					<view class="describe">
								<rich-text class="richbox" :nodes="place.Description"></rich-text>
								<!-- <view v-if="toggle" :v-html="place.Description" class="describetext"></view>
								<view v-else class="describetext2" :v-html="place.Description"></view> -->
								<!-- <view v-if="place.Description && place.Description.length > 38"
									:class="toggle ? 'expand' : 'retract'" @click="onexpand">
									<text class="expandtext">全文</text>
									<image v-if="toggle" class="expandimg"
										src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17105662490661328.png">
									</image>
									<image v-else class="expandimg"
										src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711679435607517.png">
									</image>
								</view> -->
						<!-- <view class="underlinebox"></view>		 -->
					</view>		
				<!-- </x-scroll> -->

			</view>
			
		</view>
		<view class="butbox">
			<view class="reservebox" v-if="place.IsOpenOrder == 1">
				<!--  #ifdef MP-WEIXIN -->
				<button hover-class="none" open-type="share" plain="true">
					<view class="sharebox">
						<image class="simg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17153079439531250.png"
							mode="widthFix"></image>
						<view class="text5">分享</view>
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<!-- <button hover-class="none" @click="app_share" plain="true">
					<view class="sharebox">
						<image class="simg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17153079439531250.png"
							mode="widthFix"></image>
						<view class="text5">分享</view>
					</view>
				</button> -->
				<!-- #endif -->
				<!-- <view class="sharebox">
					<image class="simg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17153079439531250.png" mode="widthFix"></image>
					<view class="text5">分享</view>
				</view> -->
				<button class="reserve" @click="gotoballadd">立即预订</button>
			</view>
		</view>
		
		<!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!--  #endif -->
	</view>
</template>

<script>
import topStatus from '@/components/topStatus/topStatus.vue';
export default {
	components: {
		topStatus
	},
	data() {
		return {
			bannerList:[],
			daylist: [],
			Auth: 0,
			topNav: false,//吸顶
			id: 0,
			place: null,
			flag: true,
			info: {},
			uid: null,
			index: 1,
			size: 10,
			load: false,
			label: [],
			toggle: true,
			detailedaddress: '天河区天河路299号(体育中心地铁站C口步行42米)',
			list2: [],
			nowLng: null,
			nowLat: null,
			distance: null,
			number: 0,
			nowday: "",
			inbg:0,
			shopId:'',

		};
	},
	onPageScroll: function (e) { //nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 210) {
			this.topNav = true
		} else {
			this.topNav = false
		}
	},
	methods: {
		changebg(index, e) {
			let _this = this
			this.inbg = index;
			this.nowday = e.year
			if(this.Auth == 0){
				uni.showModal({
					title: '温馨提示',
					content: '未注册用户不能报名，请先注册账号',
					confirmText: '注册账号',
					success: function (res) {
						if (res.confirm) {
							_this.nav_to('/pages/start/start2');
						} else if (res.cancel) {
							
						}
					}
				});
			}else{
			// this.getListDetail()
			this.nav_to(`/pages/ball/field_res?inbg=${this.inbg}&name=${this.place.ShopName}&id=${this.id}&day=${this.nowday}`)
			}
			
		},
		    //获取场地列表
		async getListDetail() {
			this.$pv.load('加载中', 0)
			await this.$api.post('/ShopOrder/GetShopTimeLayout', {
				ShopID: this.id,
				OrderDate: this.nowday
			}).then(res => {
				const { code, data, message } = res
				if (code == 0) {
					this.fieldList = data || []
				}
			}).finally(() => {
				this.$pv.closeLoad();
			})


		// this.fieldList =  this.inbg==0? moskList.list:moskList.list2
		},
		async getday() {
			for (let i = 0; i < 6; i++) {
				let nowtime = new Date();
				let time = nowtime.setDate(nowtime.getDate() + i);
				this.daylist.push({
					year: this.$util.unixDatetime(time, "yy-mm-dd"),
					day: this.$util.unixDatetime(time, "mm-dd"),
					week: this.getWeek(time),
				});
			}
		},
		goBack() {
			// console.log(getCurrentPages());
			if(getCurrentPages().length == 1){
				this.nav_to('/pages/tab/home')
			}else{
				uni.navigateBack()
			}
			
		},
		//跳转页面
		gotoballadd() {
			if (this.Auth == 0) {
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '未注册用户不能报名，请先注册账号',
					confirmText: '注册账号',
					success: function (res) {
						if (res.confirm) {
							_this.nav_to('/pages/start/start2');
						} else if (res.cancel) {
							
						}
					}
				});
			}else{
				this.nav_to('/pages/ball/field_res?name=' + this.place.ShopName + '&id=' + this.id)
			}
			
		},
		gotowrap(id) {
			uni.navigateTo({
				url: `/pages/ball/ball_details?id=${id}`,
			});
		},
		//滚动到底部触发
		scrolltolower() {

		},
		scroll(e) {
			const detail = e.detail;
		},
		//开始时间
		getTime2(tiem) {
			let d = new Date(tiem);
			let timestamp = d.getTime();
			return this.$u.date(timestamp, 'mm-dd');
		},


		//获取场所详细
		async getshops() {
			let res = await this.$api.post('/Shop/Detail', {
				ID: this.id,
			});
			if (res.code == 0) {
				let label = []
				this.place = res.data;
				try {
					label = this.place.Specialty.split(',') || this.place.Specialty
				} catch (error) {
					label = this.place.Specialty
				}
				// label = this.place.Specialty.split(',')
				this.place.Specialty = label
				this.bannerList = this.place.ShopImgs.split(',')
				if(this.place.Description){
					let topCharactersHTML = this.place.Description.replace(/\<img/gi, '<img class="helpImg"')
					this.place.Description = topCharactersHTML
				}
				

				this.load = true;
			}

		},
		//返回上一页
		handblack() {
			uni.navigateBack({
				delta: 1,
			});
		},
		
		callNumber() {
			uni.makePhoneCall({
				phoneNumber: this.place.ServerPhone,
				success: () => {

				},
				fail: () => {
					console.error('拨打电话失败！');
				},
			});
		},
		//简绍伸缩
		onexpand() {
			this.toggle = !this.toggle;
		},
		//通过地理位置获取经纬度
		autoGetLocation(item) {

			this.$util.getGeocoder(item.Address).then((a) => {
				this.openLocation(a.result.location.lat, a.result.location.lng, item);
			});
		},
		//打开地图
		openLocation() {
			uni.openLocation({
				latitude: this.place.Latitude,
				longitude: this.place.Longitude,
				success: function () {

				}
			});
		},
		//分享
		app_share() {
			this.$refs.share.open();
		},
		sharePYQ() {
			const user = uni.getStorageSync('user');
			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let shareUrl = BaseUrl + paseUrl;

			console.log('share url-----' + shareUrl);

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				href: shareUrl,
				title: user.Name + `向您推荐${this.place.ShopName}`,
				summary: `${this.place.Description}`,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				success: (res) => {
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
		shareWX() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				title: user.Name + `向您推荐${this.place.ShopName}`,
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/court/stadium?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl,
				},
				success: (res) => {
					console.log('success:' + 'pages/court/stadium?id=' + id + '&pid=' + pid);
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
		//个人信息
		getuserinfo() {
			const user = uni.getStorageSync('user');
			this.uid = user.UserID;
		},
	},
	mounted() {
		this.getshops();
		this.getuserinfo();
	},

	onLoad(e) {

		this.id = e.id;
		this.Auth = uni.getStorageSync('user').IsAuth
		this.getday();
	},
	onShareAppMessage(res) {
		//发送给朋友

		return {
			title: '【场地】向您推荐' + this.place.ShopName,
			path: `/pages/court/stadium?id=${this.id}&pid=${this.uid}`,
		};
	},
};
</script>
<style lang="less">
page {
	background: #fff;
}

button[plain] {
	border: 0;
}
.swiper {
  width: 100%;
  height: 650rpx;
//   background-color: red;
  .bannerImageBox {
    width: 100%;
    height: 650rpx;
    border-radius: 25rpx;
    margin: 0 auto;
    overflow: hidden;
    .adverimg {
      width: 100%;
    }
  }
}

.daytitle{
	background-color: #fff;
    margin-left: 36rpx;
    padding-top: 15rpx;
    font-weight: bold;
    font-size: 32rpx;
}
.daynav {
  width: 100%;
  height: 144rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  overflow-x: auto;

  .bg4 {
    background-color: #706eee !important;

    view {
      color: #fff !important;
    }
  }

  .daytime {
    min-width: 96rpx;
    height: 96rpx;
    border-radius: 8rpx;
    background-color: #f4f4fb;
    margin-left: 24rpx;
    text-align: center;
    transition: 0.3s all;

    .day {
      color: #706eee;
      font-weight: 600;
      font-size: 28rpx;
    }

    .week {
      color: #706eee;
      font-size: 24rpx;
      margin-top: 4rpx;
      margin-bottom: 8rpx;
    }
  }
}
.page_top {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	box-sizing: border-box;
	transition: 0.3s all;
}

.tabsBack {
	height: 44px;
	padding-left: 32rpx;
	display: flex;
	align-items: center;
	z-index: 999;

	.topTitle {
		padding-left: 20rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
	}

	.blackbox {
		width: 52rpx;
		height: 52rpx;
		display: flex;
		align-items: center;
	}

	image {
		width: 24rpx;
		height: 36rpx;
		display: block;
	}
}

.x-share {
	background-color: #ffffff;
	width: 750rpx;
	border-radius: 20rpx;
	padding: 40rpx 20rpx 80rpx;
	display: flex;
	box-sizing: border-box;

	.item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 10rpx;
		}

		span {
			color: #2e2e2e;
		}
	}

}

.stadiumbox {
	width: 100vw;
	// height: 100vh;
	// overflow: hidden;
	position: relative;
}

// .blackbox {
// 	position: fixed;
// 	left: 30rpx;
// 	top: 98rpx;
// 	z-index: 2000;

// 	.blackimg {
// 		width: 52rpx;
// 		height: 52rpx;
// 	}
// }
.conbox{
	width: 100%;
	position: relative;
}
.contentbox {
	width: 100%;
	min-height: 620rpx;
	background: #fff;
	position: absolute;
	top: 558rpx;
	left: 0;
	border-radius: 32rpx 32rpx 0 0;
	overflow: hidden;
	padding-bottom: 160rpx;
}

.positionbox {
	position: relative;
	// margin-bottom: 128rpx;
}

.Backgroundbox {
	width: 100%;
	min-height: 287rpx;
	position: fixed;
	top: 0;
	left: 0;
	.logo {
		width: 100%;
		height: 650rpx;
	}
}

.qiuchangxiangxi {
	width: 100%;
	min-height: 138rpx;
	box-sizing: border-box;
	padding: 15rpx 36rpx 0 36rpx;
	border-radius: 50rpx 50rpx 0 0;
	background-color: #fff;

	.underlinebox {
		width: 96%;
		margin-left: 1%;
		border-bottom: 1px solid #e4e4e4;
	}
}

.namebox {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
	margin-top: 10rpx;
	box-sizing: border-box;
	text-align: center;

	.name {
		width: 80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 32rpx;
		margin-right: 10rpx;
		color: #333333;
		font-weight: 600;
	}

	.authenimg {
		width: 110rpx;
		height: 50rpx;
		vertical-align: middle;
	}

	.authentication {
		font-size: 20rpx;
		color: #ffbc14;
	}

	.c_icon {
		width: 50rpx;
		height: 50rpx;
		position: relative;

		.cimg {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}

.labelbox {
			margin-bottom: 36rpx;
			.label {
				// width: 92rpx;
				// height: 40rpx;
				// text-align: center;
				// line-height: 40rpx;
				font-size: 20rpx;
				color: #F56E1E;
				background: #FFEEE4;
				border-radius: 8rpx;
				margin-right: 20rpx;
				padding: 6px 12rpx;
			}
		}

.label {
	width: 90rpx;
	height: 35rpx;
	box-sizing: border-box;
	padding: 5rpx 0;
	text-align: center;
	margin-right: 8rpx;
	font-size: 22rpx;
	border-radius: 5rpx;
	background-color: #ffeee4;
	color: #f56e1e;
}

.describe {
	margin-top: 10rpx;
	min-height: 78rpx;
	position: relative;
	margin-bottom: 15rpx;
	background-color: #fff;
	padding: 20rpx 36rpx;
	rich-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* 其他必要的样式 */
	}
		.helpImg{
			width: 100%;
			height: 100%;
			display: block;
			// object-fit: cover;
		}
	
}
.underlinebox {
		width: 96%;
		margin-left: 1%;
		border-bottom: 1px solid #e4e4e4;
	}
.describetext {
	width: 83%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 28rpx;
}

.describetext2 {
	width: 90%;
	font-size: 28rpx;
}

.expand {
	position: absolute;
	right: 20rpx;
	top: 35rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
}

.retract {
	position: absolute;
	right: 0rpx;
	bottom: 0rpx;
	display: flex;
	align-items: center;
	text-align: center;
}

.expandtext {
	font-size: 28rpx;
}

.expandimg {
	width: 20rpx;
	height: 16rpx;
	vertical-align: middle;
}

.qiuchangmodule2 {
	width: 100%;
	min-height: 105rpx;
	box-sizing: border-box;
	padding: 15rpx 36rpx 0 36rpx;
	background-color: #fff;

	// margin-bottom: 20rpx;
}

.timebox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;

	.timecolor {
		width: 80%;
		color: #333333;
		font-size: 28rpx;
	}

	.borderR {
		height: 30rpx;
		border-right: 1rpx solid #e4e4e4;
		flex: 1;
		margin-right: 10rpx;
	}

	.callimg {
		width: 36rpx;
		height: 34rpx;
		margin-right: 20rpx;
	}
}

.addressbox {
	display: flex;
	margin-bottom: 28rpx;
	color: #333333;
	align-items: center;
	justify-content: space-between;

	.addresstitle {
		width: 12%;
		font-size: 28rpx;
		color: #333333;
	}

	.addressname {
		width: 70%;
		font-size: 28rpx;
		color: #333333;
		box-sizing: border-box;
		padding-top: 25rpx;
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}

	.addressname1 {
		width: 70%;
		font-size: 28rpx;
		color: #333333;
		box-sizing: border-box;
		// padding-top: 25rpx;
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}

}

.detailedaddressbox {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-content: center;
	margin-bottom: 30rpx;
}

.detailedaddressomit {
	width: 80%;
	font-size: 24rpx;
	color: #999999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.distancebox {
	display: flex;
	align-items: center;
	height: 40rpx;
	margin-right: 13rpx;

	.distanceimg {
		width: 20rpx;
		height: 20rpx;
	}
}

.distance {
	color: #999999;
	font-size: 24rpx;
	line-height: 40rpx;
	margin-right: 8rpx;
}

.coach {
	margin-bottom: 20rpx;
	color: #333333;
	font-size: 48rpx;
	box-sizing: border-box;
	padding: 0 0 0 16rpx;
}
.butbox{
	width: 100%;
	height: 164rpx;
	position: relative;
}
.reservebox {
	width: 100%;
	height: 164rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	// align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	padding-top: 20rpx;
	box-sizing: border-box;

	.text5 {
		font-size: 24rpx;
		color: #666666;
	}

	.sharebox {
		margin-left: 32rpx;
		display: flex;
		flex-direction: column;

		.simg {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.collectionbox {
		margin-left: 32rpx;
		margin-right: 16rpx;
		display: flex;
		flex-direction: column;

		.cimg {
			width: 48rpx;
			height: 48rpx;
		}
	}
}

.reserve {
	width: 70%;
	height: 92rpx;
	background-color: #706EEE;
	border-radius: 45rpx;
	// position: fixed;
	// bottom: 52rpx;
	color: #fff;
}
</style>
